<template>
	<HeaderNav />
	<article>
		<!-- 网站主体 -->
		<div id="main">
			<section class="ct">
				<h1 class="detail-msg">消息中心</h1>
				
				<div class="bg-hr"></div>
				
				<ul class="msg-menu">
					<li class="official">
						<a :class="{active: type === 'official'}" @click="$router.push({name:'message', query: {type: 'official'}})" >官方(<b>0</b>)</a>
						<Official />
					</li>
					<li class="notify">
						<a :class="{active: type === 'notify'}" @click="$router.push({name:'message', query: {type: 'notify'}})" >通知(<b>0</b>)</a>
						<Notify />
					</li>
					<li class="letter">
						<a @click="$router.push({name:'message', query: {type: 'letter', to: $route.query.to}})" 
								:class="{active: type === 'letter'}">私信(<b>0</b>)</a>
						<div class="msg-content chatx">
							<iframe :src="'/chat?to='+ $route.query.to" id="chat" name="chat"></iframe>
						</div>
					</li>
					<li class="blist">
						<a :class="{active: type === 'blist'}" @click="$router.push({name:'message', query: {type: 'blist'}})" >黑名单</a>
						<BlockList />
					</li>
				</ul>
				
			</section>
			
		</div>
	</article>
	<Footer />
</template>

<script>
import HeaderNav from "../components/HeaderNav.vue";
import Footer from "../components/Footer.vue";
import Official from '../components/message/Official.vue'
import Notify from '../components/message/Notify.vue'
import BlockList from '../components/message/BlockList.vue'

export default {
	components: {
		HeaderNav, 
		Footer, 
		Official ,
		Notify, 
		BlockList
	},
	props: {
		type: {
			required: true, 
			type: String,  
		}
	},
	
}
</script>

<style>
</style>